//必需导入svgIcon.js
var ImgSearchInput = function () {
  var template = /* html */ `
    <el-input class="img-search-input" v-model="searchValue" :placeholder="placeholder" :size="size" @change="handleChange"
      v-loading.fullscreen.lock="loading">
      <div slot="suffix">
        <div class="upload-icon" @click="uploadImg">
          <svg-icon icon="camera"></svg-icon>
          <input v-if="!loading" ref="imgInput" class="upload-img-input" type="file" accept="image/*" @change="handleImgChange">
        </div>
      </div>
    </el-input>
  `;

  return {
    props: {
      value: {
        type: String,
        required: true
      },
      placeholder: String,
      size: String
    },

    watch: {
      value: function () {
        if (this.inputValue !== null) {
          this.inputValue = null;
          return;
        }
        this.searchValue = this.value;
      }
    },

    data: function () {
      return {
        loading: false,
        searchValue: this.value,
        inputValue: null
      };
    },

    methods: {
      handleChange: function () {
        var searchValue = this.searchValue;
        if (this.value === searchValue) {
          return;
        }

        this.inputValue = searchValue;
        this.$emit('input', searchValue);
        this.$emit('change', searchValue);
      },

      uploadImg: function () {
        this.$refs['imgInput'].click();
      },

      handleImgChange: function (event) {
        this.loading = true;
        var file = event.target.files[0];
        var self = this;
        postImgFileToQiniu("fileManager/getQiniuToken",file).then(function(url){
          self.$emit('img-search',url);
          self.loading = false;
        }).catch(function(){
          self.loading = false;
        });
      }
    },

    components: {
      SvgIcon: SvgIcon
    },

    template: template
  };
}();